<html>
<head>
	<link tal:attributes="href theme" type="text/css" rel="stylesheet" href="" />

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="js/jquery.form.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		// form validation
		$("#resource_add").validate({
			rules: {				
				user: {
					required: true,
					remote: {
						url: "services/check_user_project.php?project_id="+${id},
						type: "get",
						data: {
							user_id: function() {
								return $("#user_id").val();
							}
						}

					}
				},
				role: {
					required: true
				},
				user_id: {
					required: true
				}
			},
			messages: {
				user: {
					required: '<font color="#FF0000">${user_required}</font>',
					remote: '<font color="#FF0000">${user_remote}</font>'
				},
				role: {
					required: '<font color="#FF0000">${role_required}</font>'
				}
			}
		});

                // Save buttom
                $("#save").click(function(){
			if ($("#resource_add").valid() == true) {
				$("#resource_add").ajaxSubmit();
				$.nyroModalRemove();
				document.location.reload(true);
			}
                }).mouseover(function(){
                        $(this).css("cursor","pointer");
                });

		// Cancel button
		$("#cancel").click(function(){
			$.nyroModalRemove();
		}).mouseover(function(){
			$(this).css("cursor","pointer");
		});

		$("#user").autocomplete("services/user_find.php", {
			width: 180,
			selectFirst: false,
			autoFill: false,
		});

		$("#user").result(function(event, data, formatted) {
			if (data) {
				//$(this).parent().next().find("input").val(data[1]);
				$("#user_id").val(data[1]);
			}
		});
	})
	</script>
</head>
<body>
<form action="resource_add.php" method="post" id="resource_add" name="resource_add">
<input type="hidden" id="user_id" value="" name="user_id"/>
<table width="480" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
	<td rowspan="3" class="form_left" width="20">&nbsp;</td>
	<td height="20" class="form_title">&nbsp;${title}</td>
</tr>
<tr>
	<td>
	<table width="95%" border="0" cellpadding="1" cellspacing="1" align="center">
	<tr>
		<td height="10"/>
	</tr>
	<tr>
		<td align="right" height="20">${prj_name}:&nbsp;</td>
		<td width="176"><input type="text" name="user" id="user" class="form_input" /></td>
		<td align="right" height="20">${role}:&nbsp;</td>
		<td width="100">
			<select id="role" name="role" class="form_input">
				<option tal:repeat="rol roles" value='${rol/id_role}'>${rol/name}</option>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan="4" class="form_separator">&nbsp;</td>
	</tr>
	</table>
	<table width="99%" border="0" cellpadding="1" cellspacing="1">
		<tr>
			<td align="right" height="40">
				<img src="themes/default/images/btn_save.jpg" border="0" id="save" />
			</td>
			<td width="65">
				<img src="themes/default/images/btn_cancel.jpg" border="0" id="cancel" />
			</td>
		</tr>
	</table>
	</td>
	</tr>
</table>
</form>
</body>
</html>

